<template>
	<view class="rechargeRecord">
		<u-navbar title="充值记录" :title-size="35" :title-bold="true" :immersive="true" :background="background"
			:border-bottom="false"></u-navbar>
		<view class="shell" v-for="item in rechargeList">
			<view class="order" style="margin-top:40rpx;">
				<view class="order-code">
					订单号：{{item.f_wx_no}}
				</view>
				<view class="state" v-if="item.f_status==1">
					充值成功
				</view>
				<view class="state" v-if="item.f_status==0">
					取消充值
				</view>
			</view>
			<view class="order">
				<view class="order-code"
					style="width: 290rpx;height: 20rpx;font-size: 26rpx;font-family: PingFang SC;font-weight: 500;color: #999999;">
					{{item.updated_at}}
				</view>
				<view class="state"  v-if="item.f_status==1"
					style="font-size: 34rpx;font-family: PingFang SC;font-weight: 500;color: #03CC6D;">
					{{"+"+item.f_money}}
				</view>
				<view class="state"  v-if="item.f_status==0"
					style="font-size: 34rpx;font-family: PingFang SC;font-weight: 500;color: #03CC6D;">
					{{item.f_money}}
				</view>
			</view>

		</view>
		<view style="width: 55px; color: #999999; font-size: 13px; margin: auto; margin-top: 10px;">{{loadstatus}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rechargeList: {},
				loadstatus: 'more',
				isRefresh: 0,
				page:1,
				contentText: {
					contentdown: "上拉显示更多",
				 contentrefresh: "正在加载...",
					contentnomore: "亲，我是有底线的哦~"
				},
			}

		},
		onPullDownRefresh() {
		   this.isRefresh = 1;
		   this.loadstatus = 'more';
		   this.page = 1;
		   this.record();
		   uni.stopPullDownRefresh();
		  },
		onReachBottom() {
			if (this.loadstatus !== 'more') {
				return;
			}
			this.loadstatus = '加载中...';
			this.isRefresh = 0;
			this.record()
		},
		onLoad() {
			this.isRefresh = 1;
			this.record()
		},
		methods: {
			//充值接口
			record() {
				this.$Api.rechargeList({
					userId: uni.getStorageSync('userid'),
					pageNum: 15,
					page: this.page,
				}).then(res => {
					// this.rechargeList = res.data.data.data.list
					if (res.data.data.data.list.length > 0) {
						if (this.isRefresh) {
							this.rechargeList = res.data.data.data.list;
						} else {
							this.rechargeList = this.rechargeList.concat(res.data.data.data.list);
						}
						if (res.data.data.data.list.length != 15) {
							this.loadstatus = '到底了...';
						} else {
							this.loadstatus = 'more';
							this.page++;
						}
					} else {
						this.loadstatus = '到底了...';
					}
					console.log(res.data.data.data.list, '成功')
				}, err => {})
			},
			getGoodsList() {
				let page = this.page;
				let type = 'news';
				let searchValue = this.searchValue;
				getGoodsList({
					page,
					type,
					searchValue
				}).then(res => {
					if (res.code == 1) {
						if (res.data.list.length > 0) {
							if (this.isRefresh) {
								this.goodsList = res.data.list;
							} else {
								this.goodsList = this.goodsList.concat(res.data.list);
							}
							if (res.data.list.length != 15) {
								this.loadstatus = '到底了...';
							} else {
								this.loadstatus = 'more';
								this.page++;
							}
						} else {
							this.loadstatus = '到底了...';
						}
					} else {
						this.loadstatus = '到底了...';
					}
				}).catch(() => {
					this.loadstatus = '到底了...';
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-image: url('https://gongxiangtaiqiu.axa2.com/taiqiu/bg.png');
		padding-top: 200rpx;
	}

	.rechargeRecord {
		padding-bottom: 20px;
	}

	.shell {
		width: 690rpx;
		height: 160rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: auto;

		// margin-top:200rpx;
		.order {
			width: 620rpx;
			height: 80rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: auto;

			.order-code {
				// width: 278rpx;
				height: 26rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;

			}

			.state {
				// width: 110rpx;
				height: 26rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #222222;
			}


		}
	}
</style>
